<template>
  <div class="bg">
    <div v-if="isWeChat">
      <img class="banner" src="http://image.utea88.com/statics/zcyx/top_background.png" alt="">
      <div class="main_section">
        <div style="padding-top: 32px;" class="flex-row-center">
          <div class="title">输入手机号码即可领取积分</div>
        </div>
        <div class="input_bg flex-column-center">
          <el-input v-model="phone" type="number" placeholder="请输入手机号码"></el-input>
        </div>
        <div @click="submit" class="submit_bg">提交</div>
      </div>
      <div v-if="showInfo" class="mask_bg">
        <div class="info_bg">
          <div v-if="flag == 0">
            <div class="info_img_bg">
              <img style="width:60px; height:60px;" src="http://image.utea88.com/statics/zcyx/qiandao_ok.png" alt="">
            </div>
            <div class="success_tips">积分领取成功</div>
            <div class="score_bg">
              <div class="score_title">获得</div>
              <div class="score_title score"><span v-html="'&thinsp;'"></span>{{ score }}<span v-html="'&thinsp;'"></span></div>
              <div class="score_title">积分</div>
            </div>
            <div @click="showInfo = false" class="ok_bg"><div class="ok_bg_title">我知道了</div></div>
          </div>
          <div v-if="flag == 1">
            <div class="info_img_bg">
              <img style="width:60px; height:60px;" src="http://image.utea88.com/statics/zcyx/info.png" alt="">
            </div>
            <div class="phone_tips">{{  phoneTips }}</div>
            <div class="reset_bg">
              <div class="cancel" @click="showInfo = false">取消</div>
              <div class="restart" @click="resetInput()">重新输入</div>
            </div>
          </div>
          <div v-if="flag == 2">
            <div class="info_img_bg">
              <img style="width:60px; height:60px;" src="http://image.utea88.com/statics/zcyx/info.png" alt="">
            </div>
            <div class="phone_tips">{{  errorInfo }}</div>
            <div class="know_bg" @click="showInfo = false">我知道了</div>
          </div>
        </div>
      </div>
    </div>
    <div v-else style="padding-top: 50px;">
      <div style="text-align: center; ">
        <i style="font-size:104px; color: rgb(48, 159, 253);" class="el-icon-warning-outline"></i>
      </div>
      <div style="margin-top: 30px;text-align: center; font-size:18px;"><span class="tips">请在微信客户端打开链接</span></div>
    </div>
  </div>
</template>

<script>
import { getWxZcyxH5OpenId, zcyxSaveSignInH5 } from "@/api/account.js";

export default {
  name: "ZcyxBidding",
  props: {

  },
  components: {

  },
  data() {
    return {
      phone: '',
      score: 0,
      flag: 0,
      phoneTips: '您输入的手机号码有误\n请重新输入',
      errorInfo: '',
      code: '',
      openId: '',
      showInfo: false,
      isWeChat: false
    }
  },
  computed: {

  },
  watch: {},
  methods: {
    getUrlCode() {
      var code = ''
      var url = window.location.href;
      if (url.indexOf("code=") != -1) {
        var strs = url.split("code=")[1]; 
        if (url.indexOf("&") != -1) {
          code = strs.split("&")[0];
        }
      }

      return code
    },
    resetInput() {
      this.showInfo = false
      this.phone = ''
    },
    getOpenId() {
      getWxZcyxH5OpenId({ code: this.code }).then(res => {
        this.openId = res.openid
      })
      .catch((err) => {
        console.log(error)
      })
    },
    submit() {
      if (this.phone.length != 11) {
        this.showInfo = true
        this.flag = 1
        return
      }

      zcyxSaveSignInH5({ openId: this.openId, phone: this.phone }).then(res => {
        if (res.flag == 1) {
          this.showInfo = true
          this.score = res.score
          this.flag = 0
        } else {
          this.errorInfo = res.message
          this.showInfo = true
          this.flag = 2
        }
      })
      .catch((err) => {
        console.log(err)
      })
    }
  },
  created() {
    document.title = '众茶优选';

    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      this.isWeChat = true
      this.code = this.getUrlCode()

      if (this.code.length > 0) {
        this.getOpenId()
      } else {
        var targetUrl = "https://utea88.com/#/zcyxBidding"

        let url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" 
        + "wx243bbbf978551df1" + 
        "&redirect_uri=" + encodeURIComponent(targetUrl) 
        + "&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect"

        window.location.href = url
      }
    } else {
      this.isWeChat = false
    }
  },
  mounted() {
    
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
  .bg {
    position: relative;
    height: 100%; 
    background: rgba(242, 242, 242, 1);
  }

  .banner {
    width: 100%;
  }
  .main_section {
    position: absolute;
    top: 190px;
    left: 12px;
    width: calc(100% - 24px);
    height: 260px;
    border-radius: 20px;
    background: white;

    .title {
      height: 18px;
      font-size: 18px;
      font-weight: 400;
      line-height: 18px;
      color: rgba(51, 51, 51, 1);
    }

    .input_bg {
      margin-top: 25px;
      margin-left: 14px;
      width: calc(100% - 28px);
      height: 49px;
      border-radius: 30px;
      background: rgba(238, 238, 238, 1);

      ::v-deep .el-input__inner {
        border: 0;
        margin-left: 15px;
        width: calc(100% - 30px);
        font-size: 16px;
        font-weight: 400;
        line-height: 16px;
        color: rgba(51, 51, 51, 1);
        background: rgba(238, 238, 238, 1);
      }
    }

    .submit_bg {
      margin-top: 25px;
      margin-left: 14px;
      width: calc(100% - 28px);
      height: 49px;
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 49px;
      color: rgba(255, 255, 255, 1);
      text-align: center;
      border-radius: 30px;
      background: rgba(230, 15, 26, 1);
      box-shadow: 0px 2px 4px 0px rgba(230, 15, 26, 0.3);
    }
  }

  .mask_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.68);

    .info_bg {
      width: 305px;
      height: 265px;
      border-radius: 12px;
      background-color: white;
      @include abs-center;

      .info_img_bg {
        margin-top: 35px;
        text-align: center;
      }

      .phone_tips {
        margin-top: 30px;
        height: 45px;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 22px;
        color: rgba(51, 51, 51, 1);
        text-align: center;
        white-space: pre-wrap;
      }

      .know_bg {
        margin-top: 25px;
        margin-left: 42px;
        width: 220px;
        height: 40px;
        border-radius: 50px;
        background: rgba(230, 15, 26, 1);
        box-shadow: 0px 2px 4px 0px rgba(230, 15, 26, 0.3);
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 40px;
        color: white;
        text-align: center;
      }

      .reset_bg {
        margin-top: 25px;
        margin-left: 25px;
        width: calc(100% - 50px);
        height: 40px;
        display: flex;
        justify-content: space-between;

        .cancel {
          width: 120px;
          height: 40px;
          border-radius: 50px;
          background: rgba(242, 245, 247, 1);
          font-size: 16px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 40px;
          color: rgba(83, 96, 105, 1);
          text-align: center;
        }

        .restart {
          width: 120px;
          height: 40px;
          border-radius: 50px;
          background: rgba(230, 15, 26, 1);
          box-shadow: 0px 2px 4px 0px rgba(230, 15, 26, 0.3);
          font-size: 16px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 40px;
          color: white;
          text-align: center;
        }
      }

      .success_tips {
        margin-top: 11px;
        height: 21px;
        font-size: 15px;
        font-weight: 500;
        line-height: 15px;
        color: rgba(153, 153, 153, 1);
        text-align: center;
      }

      .score_bg {
        margin-top: 19px;
        @include flex-center(row);

        .score_title {
          height: 28px;
          font-size: 20px;
          font-weight: 400;
          line-height: 28px;
          color: rgba(51, 51, 51, 1);
        }

        .score {
          color: rgba(230, 15, 26, 1);
        }
      }

      .ok_bg {
        margin-top: 21px;
        @include flex-center(row);
        

        .ok_bg_title {
          width: 220px;
          height: 40px;
          opacity: 1;
          border-radius: 30px;
          background: rgba(230, 15, 26, 1);
          box-shadow: 0px 2px 4px 0px rgba(230, 15, 26, 0.3);
          text-align: center;
          font-size: 16px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 40px;
          color: white;
          vertical-align: center;
        }
      }
    }
  }
</style>